<template>
  <div class="title">
    <div class="name">汉塔大屏数据分析展示</div>
    <div class="iconbox">
      <div class="iconItem" @click="selectFun(0)"
        :style="`background-image: url(${props.select === 0 ? titBg2 : titBg1})`">
        首页
      </div>
      <div class="iconItem" style="margin-left: 20px;" @click="selectFun(1)"
        :style="`background-image: url(${props.select === 1 ? titBg2 : titBg1})`">
        设备检测
      </div>
      <div class="iconItem" @click="selectFun(2)"
        :style="`background-image: url(${props.select === 2 ? titBg4 : titBg3})`">
        监控视频
      </div>
      <div class="iconItem" style="margin-left: 20px;" @click="selectFun(3)"
        :style="`background-image: url(${props.select === 3 ? titBg4 : titBg3})`">
        时序图
      </div>
    </div>
    <div style="flex: 1;position: absolute;right: 0;top: 12px;z-index: 999;">
      <!-- 日期选择器 -->
      <div class="datePicker" v-if="props.showDay">
        <span v-show="timeType === 0">
          <el-date-picker id="dateBox" class="dateBox" v-model="day" type="date" placeholder="选择时间" :clearable="false"
            value-format="YYYY-MM-DD" @change="changeTime" />
        </span>
        <span v-show="timeType === 1">
          <!-- <el-date-picker id="dateBox" class="dateBox" v-model="day" type="week"
            placeholder="选择时间" :clearable="false" value-format="YYYY-MM-DD" @change="changeTime"
            format="YYYY[年] ww[周]" week-starts-on="1" :picker-options="{ firstDayOfWeek: 1 }"/> --> 
            <VueDatePicker
              week-picker 
              week-starts-on="1"
              :model-value="selectedWeek"
              locale="zh-CN"
              class="date-picker-xhjy"
              :clearable="false"
              :day-names="['一', '二', '三', '四', '五', '六', '七']"
              @update:model-value="handleWeekChange"
              :format="formatWeekRange"
              :style="{ 
                width: '220px',  // 控制整体宽度 
                height: '25px',  // 输入框高度 
                '--dp-font-size': '14px' // 内部文字大小 
              }"
            ></VueDatePicker>
        </span>
      </div>
      <!-- 单选 -->
      <el-row class="radioBox" v-if="props.showTimeType">
        <el-col :span="12" :class="timeType === 0 ? 'selectTime' : ''" @click="selectTimeType(0)">日</el-col>
        <el-col :span="12" :class="timeType === 1 ? 'selectTime' : ''" @click="selectTimeType(1)">周</el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import moment from "moment";
import { ref } from "vue";
import { useRouter } from "vue-router";
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'; 
// import { reactive, ref } from 'vue'
/** @api */
interface Props {
  select: number;
  showTimeType?: boolean;
  showDay?: boolean;
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  select: 0,
  showTimeType: false,
  showDay: false,
});
const emits = defineEmits(['changeTime', 'changeType']);
const router = useRouter();
const selectedWeek = ref([
  moment().startOf("isoWeek").format("YYYY-MM-DD"),
  moment().startOf("isoWeek").add(6, "days").format("YYYY-MM-DD")
]);
/** @数据 */
const titBg1 = ref<string>(
  new URL("@/assets/imgs/tit-bg-01.png", import.meta.url).href
);
const titBg2 = ref<string>(
  new URL("@/assets/imgs/tit-bg-02.png", import.meta.url).href
);
/** @数据 */
const titBg3 = ref<string>(
  new URL("@/assets/imgs/tit-bg-03.png", import.meta.url).href
);
const titBg4 = ref<string>(
  new URL("@/assets/imgs/tit-bg-04.png", import.meta.url).href
);
/** 日期类型 */
const timeType = ref<number>(0);
/** 日期 */
const day = ref<string>(moment().format("YYYY-MM-DD"));
/** @生命周期 */
/** @方法 */
const selectFun = (num: number) => {
  let url = "/home";
  if (num === 0) url = "/home";
  if (num === 1) url = "/device";
  if (num === 2) url = "/monitoring";
  if (num === 3) url = "/timing";
  router.push(url);
};
/** 选择时间类型 */
const selectTimeType = (num: number) => {
  timeType.value = num;
  emits('changeType', timeType.value)
};
/** 改变时间 */
function changeTime(_time: string) {
  selectedWeek.value = [
    moment(day.value).startOf("isoWeek").format("YYYY-MM-DD"),
    moment(day.value).startOf("isoWeek").add(6, "days").format("YYYY-MM-DD")
  ]
  emits('changeTime', day.value);
}
// 处理周选择变化 
const handleWeekChange = (range) => {
  selectedWeek.value  = range;
  emits('changeTime', selectedWeek.value[0]);
  //generateWeekDays(range.start); 
};
// 自定义显示格式（示例："第15周 (04/07-04/13)"）
const formatWeekRange = (date: any) => {
  console.log(date,11111)
  const start = new Date(moment(date).startOf("isoWeek").format("YYYY-MM-DD")); //date.start
  const end = new Date(moment(date).startOf("isoWeek").add(6, "days").format("YYYY-MM-DD")); //date.end
  return `第${getWeekNumber(start)}周 (${start.getMonth()+1}/${start.getDate()}-${end.getMonth()+1}/${end.getDate()})`; 
};
// 计算ISO周数（示例：2025年4月7日=第15周）
const getWeekNumber = (date: any) => {
  const firstDayOfYear: any = new Date(date.getFullYear(),  0, 1);
  const daysOffset = (date - firstDayOfYear) / 86400000;
  return Math.ceil((daysOffset  + firstDayOfYear.getDay()  + 1) / 7);
};
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss">
.dateBox {

  .el-input__wrapper {
    // background-color: #063d7b;
    // border: 1px solid #27b6e6 !important;
    background-color: #363434!important;
    border: 1px solid #4b4b4b !important;
    box-shadow: none;

    .el-input__prefix {
      color: #fff;
    }

    .el-input__inner {
      color: #fff;
    }
  }
}
</style>
<style lang="scss" scoped>
.date-picker-xhjy:deep(.dp__input_reg){
    background-color: #363434!important;
    color: white;
    border: 0px;
}
.title {
  width: 100%;
  height: 72px;
  background: url("@/assets/imgs/bg-02.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  letter-spacing: 2px;
  user-select: none;

  .name {
    font-family: YouSheBiaoTiHei;
    font-size: 44px;
    background: linear-gradient(180deg,
        #d3ebff 0%,
        #ffffff 51%,
        rgba(24, 99, 161, 0.87) 100%);
    -webkit-background-clip: text;
    //-webkit-text-fill-color: transparent;
    background-clip: text;
    color: #FFFFFF; //transparent;
    line-height: 57px;
    text-shadow: 0px 5px 10px #736D55;
    width: 100%;
    text-align: center;
  }

  .iconbox {
    position: absolute;
    display: flex;
    // background-color: lightcoral;
    margin-left: 16%;
    width: 68%;
    margin-top: 25px;

    :nth-child(3) {
      margin-left: auto;
    }

    .iconItem {
      width: 146px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      background: url("@/assets/imgs/tit-bg-01.png") no-repeat center center;
      background-size: contain;
      cursor: pointer;
      color: #ffffff;
      font-size: 22px;
      //margin-left: -25px;
      text-shadow: 0px 5px 10px rgba(0, 28, 104, 0.63);
    }
  }

  .radioBox {
    float: right;
    margin-right: 40px;
    margin-top: 10px;
    width: 122px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    background: rgb(52 52 52);// #032a54;
    display: flex;
    cursor: pointer;
    color: #FFFFFF;
    .selectTime {
      // background: rgba(31, 92, 198, 0.5);
      // box-sizing: border-box;
      // border: 1px solid #40d3ff;
      // border-radius: 4px;
      // overflow: hidden;
      // box-shadow: inset 2px 2px 5px 0px rgba(0, 174, 255, 0.49);
      background: #000;
      box-sizing: border-box;
      border: 1px solid #5c5c5c;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: inset 2px 2px 5px 0px rgba(0, 0, 0, 0.49);
    }
  }
}

.datePicker {
  //float: right;
  margin-top: 10px;
  margin-right: 30px;
}
</style>
